<template>
  <div class="app-container">
    <div class="filter-container" v-if="!isManage">
      <el-select v-model="filters['checkStatus']" clearable placeholder="审核状态" size="small" >
          <el-option v-for="(item,index) in commonCheckStatus" :key="index" :label="item" :value="index">
          </el-option>
      </el-select>
      <el-date-picker
        v-model="filters.startTime"
        size="small"
        format="yyyy-MM-dd"
        :clearable="true"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择开始日期"
        :picker-options="pickerOptions1"
      ></el-date-picker>
      <el-date-picker
        v-model="filters.endTime"
        size="small"
        format="yyyy-MM-dd"
        :clearable="true"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择结束日期"
        :picker-options="pickerOptions1"
      ></el-date-picker>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
    </div>
    <el-table
      size="smamedium"
      :data="list"
      :height="tableHeight"
      :fit="true"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border=""
      highlight-current-row
      style="width: 100%"
      v-if="!isManage"
    > 
      <el-table-column align="center" label="操作" width="260" fixed="left">
        <template slot-scope="scope">
          <div class="btns">
            <el-button size="mini" v-if="scope.row.auditStep!=5 && ~accessable.indexOf('goods:goods_price_check_approve')" type="success" @click="handleCommand(scope.row,'check_approve')">审核通过</el-button>
            <el-button size="mini" v-if="scope.row.auditStep!=10 && ~accessable.indexOf('goods:goods_price_check_reject')" type="danger" @click="handleCommand(scope.row,'check_reject')">审核拒绝</el-button>
            <el-button size="mini" type="default" @click="listImportData(scope.row.id)">查看商品</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" type="index" label="ID" width="80" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="checkStatus" align="center" label="审核状态">
        <template slot-scope="scope">
          <span>{{scope.row.checkStatus|checkStatusMap}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="checkTime" align="center" label="审核时间">
        <template slot-scope="scope">
          <span>{{scope.row.checkTime|parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="checkRemark" align="center" label="审核备注">
        <template slot-scope="scope">
          <span>{{scope.row.checkRemark}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="导入时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime|parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" align="center" label="导入操作人">
        <template slot-scope="scope">
          <span>{{scope.row.creator}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" v-if="!isManage">
      <el-pagination
        background=""
        @size-change="sizeChange"
        @current-change="loadData"
        :current-page.sync="filters.page"
        :page-sizes="[10,20,30,50]"
        :page-size="filters.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { commonCheckStatus} from '../../config/constants'

import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'

export default {
  components: {
  },
  data () {
    return {
      tableHeight: 500,
      commonCheckStatus : commonCheckStatus,
      // typeCodeData:[],
      total: 0,
      list: [],
      hasNewGoodRules: false,
      uillUpdateImg: false,
      isAddingRule: false,
      skuStockList: [],

      stockDialogVisible: false,
      stockDialogData: {
        stock: 0,
        id: 0
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      ruleDialogVisible: false,
    }
  },
  filters: {
    checkStatusMap (s) {
      return {
        '0': '待审核',
        '5': '审核通过',
        '10': '审核驳回',
      }[s + '']
    },
  },
  watch: {
    $route () {
      if (this.$route.name == 'goods.goods_price.list_data') {
        this.isManage = true
      } else {
        this.isManage = false
      }
    }
  },
  created () {
    if (this.$route.name == 'goods.goods_price.list_data') {
      this.isManage = true
    } else {
      this.isManage = false
    }
    this.filters.limit = 10
    this.loadData()
    this.tableHeight = window.innerHeight - 280
  },
  methods: {
    handleFilter () {
      this.loadData()
    },
    sizeChange (p) {
      this.filters.limit = p
      this.loadData()
    },
    loadData () {
      this.$post('/admin/goods_price_import/list', this.filters).then(data => {
        this.list = data.rows
        this.total = data.total
      })
    },
    handleCommand (row, command) {
      let postData = (value, isPassed) => {
        this.$post('/admin/goods_price_import/' + command, {
          id: row.id,
          approveRemark: value
        }).then(res => {
          this.loadData();
          this.$$notify('操作成功')
        })
      }
      if (command == 'check_reject') {
        this.$prompt('请输入审核拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(({ value }) => {
            postData(value)
          })
          .catch(() => {})
      } else {
        this.$$comfirm('确定审核通过吗？', () => {
          postData('', 1)
        })
      }
    },
    listImportData (id) {
    this.$router.push('/goods/goods_price/list_data?id=' + id)
  },
  },
}
</script>
<style scoped>
.avatar {
  height: auto;
  display: block;
  margin: 0 auto;
  width: 100px;
}

.btns {
  padding-left: 15px;
}

.btns /deep/ button {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
